<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="添加地址" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-pd-lr-20">
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c">
				<view class="dfj-flex-1 dfj-f-30 dfj-t-333">收货人</view>
				<view class="dfj-flex-4"><input class="dfj-pd-lr-20 dfj-t-666 dfj-pd-tb-30 dfj-f-30" placeholder="请输入收货人姓名" v-model="addressForm.userName"/></view>
			</view>
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c">
				<view class="dfj-flex-1 dfj-f-30 dfj-t-333">手机号</view>
				<view class="dfj-flex-4"><input class="dfj-pd-lr-20 dfj-t-666 dfj-pd-tb-30 dfj-f-30" placeholder="请输入收货人手机号" v-model="addressForm.mobilePhone"/></view>
			</view>
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c">
				<view class="dfj-flex-1 dfj-f-30 dfj-t-333">收货地址</view>
				<view class="dfj-flex-4" @tap="openAddres">
					<view class="dfj-pd-lr-20 dfj-t-666 dfj-pd-tb-30 dfj-f-30" v-if="pickerText">{{ pickerText.label }}</view>
					<view class="dfj-pd-lr-20 dfj-t-666 dfj-pd-tb-30 dfj-f-30" v-else>请选择地址</view>
				</view>
			</view>
			<view class="dfj-pd-tb-20">
				<textarea style="width: 100%;" placeholder-style="color:#999" v-model="addressForm.address" placeholder="请输入详细地址" />
			</view>
			
			<view class="dfj-t-r">
				 <checkbox-group @change="checkboxChange">
				     <label class="dfj-t-999">
				        <checkbox value="cb" :checked="false" style="transform:scale(0.7)" />设为默认地址
				     </label>
				 </checkbox-group>
			</view>
			
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
			
			<view class="dfj-mg-lr-20 dfj-pd-t-50 dfj-mg-t-50">
				<button class="address-btn" @click="add">保 存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				addressForm: {
					addressProvince: '', //省
					addressCity: '', //市
					addressCounty: '', //区/县
					userName: '', //收货人
					mobilePhone:'', //手机号
					address:'', //详细地址
					isDefault: 0, //是否默认 
					postCode:'' //邮编
				}
			}
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			add() {
				if(this.addressForm.userName == ''){
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast()
					},1000)
					return false
				}
				if(this.addressForm.mobilePhone == ''){
					uni.showToast({
						title: '请输入收货人号码',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast()
					},1000)
					return false
				}
				if(this.addressForm.addressProvince == ''){
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast()
					},1000)
					return false
				}
				if(this.addressForm.address == ''){
					uni.showToast({
						title: '请输入收货人详细地址',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast()
					},1000)
					return false
				}
				this.$http({
					url: '/userOpt/addReceivingAddress',
					data: this.addressForm
				}).then(res=> {
					console.log(res)
					if(res.flag){
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(()=>{
							uni.hideToast()
							uni.navigateBack()
						},1000)
					}
				})
			},
			openAddres() {
				if(this.pickerText && this.pickerText.value.length>=3){
					this.cityPickerValueDefault = this.pickerText.value
				}else{
					this.cityPickerValueDefault = [0,0,0]
				}
				//this.cityPickerValueDefault = [0,0,0]
			    this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e);
				this.pickerText = e;
				this.addressForm.addressProvince = e.labelArr[0]; //省
				this.addressForm.addressCity = e.labelArr[1]; //市
				this.addressForm.addressCounty = e.labelArr[2]; //区/县
			},
			checkboxChange(e){
				if(e.detail.value.length>0){
					this.addressForm.isDefault = 1
				}else{
					this.addressForm.isDefault = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{background: #fff;}
	.address-btn{
		background: #318CFF;
		width: 100%;
		color: #fff;
	}
</style>
